<template>
	<view class="container">
			<view class="herder">
				<image class="bg-img" :src="app_img+'/app-img/user1.jpg'"></image>
				<view class="herder-img">
					<image class="herder-image" :src="her_img!=null?app_d_img+her_img:''" mode="" ></image>
				</view>
				<view class="herder-span">
					<text>当前用户：</text><text style="color: #FFFFFF;">{{nickName}}</text><text style="float: right;">状态：<text style="color: #13CE66;">在线</text></text>
				</view>
			</view>
			
			<!-- 浏览历史 -->
			<view class="history-section icon">
	
				<list-cell icon="icon-grzl" iconStyle="color:#5fcda2;" title="个人资料" @eventClick="navTo('/pages/user/personal-data/personal-data')"></list-cell>
				<list-cell icon="icon-share" iconStyle="color:#9789f7;" @eventClick="toggle('center')" title="分享" tips="分享二维码"></list-cell>
				<list-cell icon="icon-shezhi1" iconStyle="color:#e07472;" title="设置"  @eventClick="navTo('/pages/setting/setting')"></list-cell>
				<list-cell icon="icon-wtbz" iconStyle="color:#ffff00;" title="问题帮助"  @eventClick="navTo('/pages/set/set')"></list-cell>
				<list-cell icon="icon-tuichu"  iconStyle="position: absolute;left: 35%;color:#e07472;" iconColor="#e07472" navigateType="" style1="text-align: center;color: red !important;"  title="退出登录" border="" @eventClick="navToBack()"></list-cell>
			</view>

	<!-- 普通弹窗 -->
		<uni-popup ref="popup" background-color="#fff" >
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }"><view class="content-img">
				<image :src="app_img+'/app-img/2RB8ZFB.png'" mode="" style="width: 400rpx;height: 400rpx;"></image>
			</view></view>
		</uni-popup>
	</view>
</template>
<script>
import listCell from '@/components/mix-list-cell';
export default {
	components: {
		listCell,
	},
	data() {
		return {
			app_img:this.appimg,
			app_d_img:this.appimg+'/app-img/user',
			her_img:null,
			nickName:this.$store.state.user.user.nickName,
			hasLogin:true,
			showTextmsg:false,
			type:'',
			textmsg:{
				cancel:'取消',
				},
		};
		
	},
	onLoad() {
		this.her_img=this.$store.state.user.user.avatar
	},
	// #ifndef MP
	onNavigationBarButtonTap(e) {
		
	},
	// #endif

	methods: {
		toggle(type) {
			this.type = type
			// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
			this.$refs.popup.open(type)
		},
		// fxClick(){
		// 	this.showTextmsg=true
		// },
		operation(e) {
			let that = this
			let type  = e
			if(type == 1){
				 //取消操作
				that.showTextmsg = false
			}
		},
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			console.log('跳转路径', url);
			if (!this.hasLogin) {
				url = '/pages/login/login';
			}
			uni.navigateTo({
				url
			});
		},
		navToBack(){
			uni.removeStorage({
				key: 'token',
				success: function (res) {
					console.log('清除token成功');
				}
			});
			let url = '/pages/login/login';
			uni.navigateTo({
				url
			});
		}
	}
};
</script>
<style lang="scss">
%flex-center {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

%section {
	display: flex;
	justify-content: space-around;
	align-content: center;
	background: #fff;
	border-radius: 10upx;
}

.herder{
	width: 100%;
	height: 300rpx;
	// background-color: #0089ff7d ;
	
}

.herder-img{
	width: 200rpx;
	height: 200rpx;
	top: 15rpx;
	position: relative;
	margin: 0 auto;
	border-radius: 50%;
}
.herder-span{
	width: 70%;
	height: 70rpx;
	top: 30rpx;
	margin: 0 auto;
	position: relative;
	// background-color: #fff;
}
.herder-image{
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	border: 1px #fff solid;
}
</style>
